<template>
	<tab-page :current="3" hide-title-bar>
		<view class="flex-center" style="padding: 200rpx 0 150rpx 0">
			<view class="border b-active rounded-xxl mb-2 overflow-hidden" @click="toPersonal">
				<c-img :src="meData.avatarUrl" :width="200" :height="200" />
			</view>
			<text class="text-l color-main" v-if="meData.nickName" @click="toPersonal">{{ meData.nickName }}</text>
		</view>
		<view class="px-3-1" style="margin-bottom: 60rpx">
			<view class="bg-active rounded-xxl px-2-2 py-1-3 color-bg">
				<view class="row-center" style="margin-bottom: 90rpx">
					<text class="text-m">储值金额</text>
					<view class="flex-1" />
					<!-- <text class="iconfont icon-eye text-xxl"></text> -->
				</view>
				<view class="row-center">
					<text class="pr-1-3" style="font-size: 60rpx" @click="toStoredList">
						{{ loadingStored ? '加载中...' : storedBalance }}
					</text>
					<text class="text-xl" @click="toStoredList">元</text>
					<view class="flex-1" />
					<text class="text-l" @click="bindNow">立即绑定</text>
				</view>
			</view>
		</view>
		<view
			class="row-center pb-3-1 pt-6-2 px-6 border-b b-active"
			v-for="el in data"
			:key="el.title"
			hover-class="bg-primary-op10"
			hover-start-time="0"
			hover-stay-time="0"
			@click="toPage(el)"
		>
			<text class="color-main font-semibold text-l">{{ el.title }}</text>
			<view class="flex-1" />
			<text class="iconfont icon-you color-main text-xl"></text>
		</view>
		<bind-stored ref="bindStoredPopup" @bindSuc="handleBindSuc"></bind-stored>
	</tab-page>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getMemberInfo } from '@/base/api/login.js';
import { getStoredBalance } from "@/base/api/member.js";

export default {
	onLoad(option) {
		const orderNo = option.orderNo;
		if(orderNo) {
			uni.navigateTo({
				url: "/pages/order-detail/order-detail?orderNo=" + orderNo,
			});
		}
	},
	setup() {
		const meData = ref({});
		const data = ref([
			{ title: '我的订单', page: '/pages/order-list/order-list' },
			{ title: '地址管理', page: '/pages/contact-manage/contact-manage' },
			{ title: '会员信息', handler: toPersonal },
			// { title: '我的卡包' },
			// { title: '我的券包', page: '/pages/coupon-list/coupon-list' },
			// { title: '我的收藏' },
			// { title: '在线客服' },
			// { title: '致电', handler() {} },
			// { title: '商务' },
			// { title: '门店信息' },
			// { title: '设置' },
		]);
		function toPage(item) {
			if (item.handler) {
				item.handler();
				return;
			}
			if (!item.page) return;
			uni.navigateTo({
				url: item.page,
			});
		}
		async function reloadUserInfo() {
			const info = await getMemberInfo({ useGlobalLoading: true });
			if (info) {
				meData.value = info;
			}
			return info;
		}
		function toPersonal() {
			uni.navigateTo({
				url: '/pages/personal-center/personal-center',
				success(e) {
					e.eventChannel.emit('data', {
						reloadUserInfo,
						userInfo: meData.value,
					});
				},
			});
		}
		
		const loadingStored = ref(false);
		const storedBalance = ref(0);
		async function reloadStoredBalance(){
			loadingStored.value = true;
			const data = await getStoredBalance();
			loadingStored.value = false;
			storedBalance.value = data || 0;
		}
		const bindStoredPopup = ref();
		function bindNow(){
			bindStoredPopup.value.open();
		}
		
		onMounted(() => {
			reloadUserInfo();
			reloadStoredBalance();
		});
		
		function handleBindSuc(){
			reloadStoredBalance();
		}
		
		function toStoredList(){
			uni.navigateTo({
				url: "/pages/stored-list/stored-list"
			});
		}
		return {
			meData,
			data,
			toPage,
			toPersonal,
			loadingStored,
			storedBalance,
			bindNow,
			bindStoredPopup,
			handleBindSuc,
			toStoredList,
		};
	},
};
</script>
<style></style>
